
const goods = document.querySelector('.goods')
const as = document.querySelectorAll('.nav a')
const nav = document.querySelector('.nav')
const slideshow = document.querySelector('.slideshow')
const swiperWapper = document.querySelector('.swiper-wrapper')
const pic = document.querySelector('.pic')

//获取搜索框焦点跳转到搜索页面
document.querySelector('.sousuo').addEventListener('focus',function () {
  location.href='./sousuo.html'
})

//轮播图
var swiper = new Swiper('.swiper-container', {
  observer: true, //修改swiper自己或子元素时，自动初始化swiper
  observeParents: true ,//修改swiper的父元素时，自动初始化swiper
  pagination: '.swiper-pagination',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  paginationClickable: true,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: 1000,
  loop: true,
  autoplayDisableOnInteraction: false,
})
//渲染导航组
axios.get('page/detail').then((res) => { 
  console.log(res.data.data.pageData);
  let str1=''
  res.data.data.pageData.items[3].data.forEach(ele => {
    const {imgUrl,text}=ele
    str1 += `
    <a href="./classify.html">
    <img
      src=${imgUrl}
      draggable="false"
    />
    <p>${text}</p>
  </a>`
   })
  nav.innerHTML = str1
})

//渲染轮播图
axios.get('page/detail').then(({ data }) => {
  console.log(data.data.pageData.items[1].data)

  let str2=''
  data.data.pageData.items[1].data.forEach((ele) => {
    console.log(Object.values(ele.link.param.query).join(''))
    str2+=`<div class="swiper-slide red-slide data-id=${Object.values(ele.link.param.query).join('')
    }">
    <img
      src=${ele.imgUrl}
      alt=""
      data-id=${Object.values(ele.link.param.query).join('')}
    />
  </div>`
  })
  swiperWapper.innerHTML = str2
  swiperWapper.addEventListener('click',function (e) {
    if (e.target.tagName == 'IMG') {
    // localStorage.setItem('shangpinId',e.target.dataset.id)
    location.href=`./shangpin.html?goodsId=${e.target.dataset.id}`
    }
  })
})

//渲染图片
axios.get('page/detail').then(({data}) => {
  let str3=''
  data.data.pageData.items[4].data.forEach((ele) => {
    str3+=`<a href='./classify.html'><img
    src=${ele.imgUrl}
    alt=""/>
    </a>
  `
  })
  pic.innerHTML=str3
})

//渲染商品
axios.get('page/detail').then((res) => { 
  // console.log(res.data.data.pageData);
  let str4=''
  res.data.data.pageData.items[6].data.forEach((ele,i) => {
    const {goods_id,goods_image,goods_name,goods_price_max, line_price_max
      , goods_sales } = ele
    let line_price_maxs = line_price_max== 0.00?'':'￥'+line_price_max
    str4 += `<a href='./shangpin.html?goodsId=${goods_id}'>
    <div class="item" data-id='${goods_id}'>
        <div class="item_left" data-id='${goods_id}'>
          <img data-id='${goods_id}'
            src=${goods_image}
            alt=""
          />
        </div>
        <div class="item_right" data-id='${goods_id}'>
          <span class="spa" data-id='${goods_id}'>${goods_name}</span>
          <p class="spb" data-id='${goods_id}'>已售${goods_sales}件</p>
          <p class="spc" data-id='${goods_id}'>
            <span class="spca" data-id='${goods_id}'><i>￥</i> ${goods_price_max}</span>
            <del data-id='${goods_id}'>${line_price_maxs}</del>
          </p>
        </div>
      </div>
    </a>`
   })
  goods.innerHTML = str4
})
